<template>
	<div id="userLayout" :class="['user-layout-wrapper', device]">
		<div class="container">
			<div class="top">
				<div class="header">
					<a href="/">
						<img src="~@/assets/logo.png" class="logo" alt="logo">
						<span class="title">研发中心-任务系统</span>
					</a>
				</div>
				<div class="desc">

				</div>
			</div>

			<route-view></route-view>


			<div class="footer">
				<div class="links">

					<a-popover>
						<template slot="content">
							“专业”指的是科技人员一直只做最擅长的事情，始终坚持科技先行，为业务发展提供行业领先的科技服务；
						</template>
						<a href="_self"><b>专业</b></a>
					</a-popover>
					<a-popover>
						<template slot="content">
							“专注”指的是科技信息部全心投入于自主研发和安全生产，不断提升研发实力，实现持续创新，并保证业务系统稳定运行；
						</template>
						<a href="_self"><b>专注</b></a>
					</a-popover>
					<a-popover>
						<template slot="content">
							“专心”指的是科技工作需要真诚地同各机构部门沟通需求听取意见，努力做好科技引领业务发展，实现行业价值；
						</template>
						<a href="_self"><b>专心</b></a>
					</a-popover>
				</div>
				<div class="copyright">
					Copyright © 2022 <a target="_blank" href="https://www.xjbank.com/">新疆银行</a> All rights reserved.
					<b>Snowy 1.8</b>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import RouteView from './RouteView'
	import {
		mixinDevice
	} from '@/utils/mixin'

	export default {
		name: 'UserLayout',
		components: {
			RouteView
		},
		mixins: [mixinDevice],
		data() {
			return {}
		},
		mounted() {
			document.body.classList.add('userLayout')
		},
		beforeDestroy() {
			document.body.classList.remove('userLayout')
		}
	}
</script>

<style lang="less" scoped>
	#userLayout.user-layout-wrapper {
		height: 100%;

		&.mobile {
			.container {
				.main {
					max-width: 368px;
					width: 98%;
				}
			}
		}

		.container {
			width: 100%;
			min-height: 100%;
			background-color: #ffffff;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='88' y1='88' x2='0' y2='0'%3E%3Cstop offset='0' 			stop-color='%23064e77'/%3E%3Cstop offset='1'  stop-color='%230a7dbe'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' 			gradientUnits='userSpaceOnUse' x1='75' y1='76' x2='168' y2='160'%3E%3Cstop offset='0' 			stop-color='%238f8f8f'/%3E%3Cstop offset='0.09' stop-color='%23b3b3b3'/%3E%3Cstop offset='0.18' stop-color='%23c9c9c9'/%3E%3Cstop offset='0.31' stop-color='%23dbdbdb'/%3E%3Cstop offset='0.44' stop-color='%23e8e8e8'/%3E%3Cstop offset='0.59' stop-color='%23f2f2f2'/%3E%3Cstop offset='0.75' 			stop-color='%23fafafa'/%3E%3Cstop offset='1' 			stop-color='%23FFFFFF'/%3E%3C/linearGradient%3E%3Cfilter id='c' x='0' y='0' width='200%25' height='200%25'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='12' /%3E%3C/filter%3E%3C/defs%3E%3Cpolygon fill='url(%23a)' points='0 174 0 0 174 0'/%3E%3Cpath fill='%23000' fill-opacity='.5' 			filter='url(%23c)' d='M121.8 174C59.2 153.1 0 174 0 174s63.5-73.8 87-94c24.4-20.9 87-80 87-80S107.9 104.4 121.8 174z'/%3E%3Cpath fill='url(%23b)' d='M142.7 142.7C59.2 142.7 0 174 0 174s42-66.3 74.9-99.3S174 0 174 0S142.7 62.6 142.7 142.7z'/%3E%3C/svg%3E");
			background-attachment: fixed;
			background-repeat: no-repeat;
			background-position: top left;
			padding: 110px 0 144px;
			position: relative;

			a {
				text-decoration: none;
			}

			.top {
				text-align: center;

				.header {
					height: 44px;
					line-height: 44px;

					.badge {
						position: absolute;
						display: inline-block;
						line-height: 1;
						vertical-align: middle;
						margin-left: -12px;
						margin-top: -10px;
						opacity: 0.8;
					}

					.logo {
						height: 44px;
						vertical-align: top;
						margin-right: 16px;
						border-style: none;
					}

					.title {
						font-size: 33px;
						color: rgba(0, 0, 0, .85);
						font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
						font-weight: 600;
						position: relative;
						top: 2px;
					}
				}

				.desc {
					font-size: 14px;
					color: rgba(0, 0, 0, 0.45);
					margin-top: 12px;
					margin-bottom: 40px;
				}
			}

			.main {
				min-width: 260px;
				width: 368px;
				margin: 0 auto;
			}

			.footer {
				position: absolute;
				width: 100%;
				bottom: 0;
				padding: 0 16px;
				margin: 48px 0 24px;
				text-align: center;

				.links {
					margin-bottom: 8px;
					font-size: 14px;

					a {
						color: rgba(0, 0, 0, 0.45);
						transition: all 0.3s;

						&:not(:last-child) {
							margin-right: 40px;
						}
					}
				}

				.copyright {
					color: rgba(0, 0, 0, 0.45);
					font-size: 14px;
				}
			}
		}
	}
</style>
